<template>
  <div>
    <!-- 面包屑 -->
    <el-bread></el-bread>
    <!-- 添加按钮 -->
    <el-button type="primary" class="btn" @click="addDialog">添加</el-button>
    <!-- 列表 -->
    <v-list @edit="edit"></v-list>
    <!-- 弹窗 -->
    <v-dialog :isShow="isShow" :isAdd="isAdd" @cancel="cancel" ref="dialogRef"></v-dialog>
  </div>
</template>
<script lang='ts' setup>
// 引入面包屑
import elBread from '../../common/elbread.vue'
// 引入列表
import vList from './list.vue'
// 引入弹框
import vDialog from './dialog.vue'
// 引入ref
import { ref } from 'vue'
// 引入路由
// import { useRoute } from 'vue-router'
// let route = useRoute()
// 用来显示弹框隐藏和显示
let isShow = ref(false)
let isAdd = ref(true)
// 定义打开弹框事件
const addDialog = () => {
  // vue3没有this实例 如要重新赋值必须是 变量.value
  isShow.value = true
  isAdd.value = true
}
// 取消弹框
const cancel = (e: boolean) => {
  isShow.value = e
}
// 编辑打开弹框
let dialogRef=ref()
const edit = (e:number) => {
  isShow.value = true
  isAdd.value = false
  dialogRef.value.lookup(e)
}
</script>
<style lang="less" scoped>
.btn {
  margin: 15px;
}

.top {
  margin-top: 15px;
  margin-left: 15px;
}
</style>